<template>
  <div
    class="risk-item"
    :class="{
      'risk-item-high': type === 'high',
      'risk-item-low': type === 'low',
    }"
  >
    asdfasdfa
    <div v-show="type" class="risk-item-decor">
      <span class="text">{{ type === "high" ? "高风险" : "低风险" }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: undefined,
    },
  },
  data() {
    return {};
  },

  methods: {},
};
</script>
<style  scoped lang="scss">
$high-color: #ff4d4f;
$low-color: #faad14;
.risk-item {
  position: relative;
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 8px;
  width: 196px;
  height: 63px;
  border: 1px solid rgba(190, 190, 190, 1);
  border-radius: 4px;
  &-decor {
    position: absolute;
    right: 0;
    top: 0;
    width: 58px;
    height: 17px;
    border-bottom-left-radius: 17px;
    background: 6px -1px / 26% url("@/assets/images/warring-bg.png") no-repeat;
    .text {
      position: absolute;
      right: 2px;
      top: 2px;
      font-size: 12px;
      line-height: 1;
      color: #fff;
    }
  }
}
.risk-item-high {
  border-color: $high-color;
  .risk-item-decor {
    background-color: $high-color;
  }
}
.risk-item-low {
  border-color: $low-color;
  .risk-item-decor {
    background-color: $low-color;
  }
}
</style>